<style>
    .top-phone {
        float: right;
        padding-right: 8%
    }

    .phone-img {
        display: inline-block;
        position: relative;
        top: -10px;
    }

    nav.navbar {
        background: #1A3347;
        /* height: 72px; */
        border: none;
    }

    nav.navbar-fixed-top {
        top: 40px;
    }

    .navbar-brand img {
        padding: 0;
        margin-top: -20px;
        width: 140px;
    }

    .navbar-nav a {
        text-shadow: 0 0 5px #000;
        color: #ffffff !important;
        background: #1A3347;
    }

    .navbar-nav a:hover {
        text-shadow: 0 0 5px #000;
        color: #ffffff !important;
        background: #1A3347 !important;
    }

    .navbar-default .navbar-nav>.open>a {
        color: #ffffff !important;
        background: #1A3347 !important;
    }

    .navbar-nav li.dropdown {
        margin-left: 10px;
    }

    .dropdown-menu {
        margin: 0 !important;
        padding: 0;
        border: none;
        border-radius: 6px;
        box-shadow: none;
        left: 0px;
        overflow: visible;
        right: auto;
        background: #1A3347;
    }

    .navbar-nav li a.contact-a {
        margin: 5px auto;
        background: #45C2B5;
        border: #45C2B5 2px solid;
    }
</style>
<div class="container-fluid">
    <div class="container">
        <div class="top-phone">
            <div class="phone-img" style="display: inline-block;">
                <img src="/static/images/con_icon3.png" alt="phone" style="width: 40px;height: 40px;">
            </div>
            <div style="display: inline-block;font-size: 14px;">
                <span style="color:#969696">联系电话</span>
                <br>
                <span style="color: rgb(243, 58, 34);letter-spacing:1px;">010-62345665/62343188</span>
            </div>
        </div>
    </div>
</div>
<nav class="side-navbar"></nav>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header navbar-left">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="logo" src="/static/picture/logo.png">
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/">首页</a></li>
                    {foreach $categories as $menu}
                    {notempty name="menu.child"}
                    <li class="dropdown">
                        <a {if !empty($menu.url)} href="{$menu.url}" {/if}  class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">{$menu.name}<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            {foreach $menu.child as $childmenu}
                            <li><a href="{$childmenu.url}">{$childmenu.name}</a></li>
                            {/foreach}
                        </ul>
                    </li>
                    {else/}
                    <li><a href="{$menu.url}" title="{$menu.name}">{$menu.name}</a></li>
                    {/notempty}
                    {/foreach}
                    <li>
                        <a class="btn btn-default radius contact-a" target="_self" href="/contactus.html"
                            data-wpel-link="internal">联系我们</a>
                    </li>
                    <li><a href="/EN.html" title="EN">EN</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </div>
</nav>
<script>
    // $(".dropdown").hover(function () {
    //     $(".dropdown").removeClass("open")
    //     $(".dropdown").children("a").attr("aria-expanded", false)
    //     $(this).children("a").attr("aria-expanded", false)
    //     $(this).addClass("open")
    // });

    $(document).scroll(function () {
        if ($(document).scrollTop() > 40) {
            $(".navbar-fixed-top").css("top", "0px");
        } else {
            $(".navbar-fixed-top").css("top", "40px");
        }
    })
</script>